
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../assets/css/drumKit.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <title>Javascript Drum kit</title>
</head>

<body onresize="resizer()">
  <div class="container">
    <header>
      <h1 class="heading"><i class="fab fa-js"></i> Javascript Drum-Kit <i class="fas fa-drum"></i></h1>
      <img src="../assets/GIFs/drum-kit.gif" alt="drum icon">
    </header>  
    <main class="keys">
 



  <main class="keys">

  <button class="A drum">A</button>
  <button class="S drum">S</button>
  <button class="D drum">D</button>
  <button class="F drum">F</button>
  <button class="G drum">G</button>
  <button class="H drum">H<button>
  <button class="J drum">J</button>
  <button class="K drum">K</button>
  <button class="L drum">L</button>


    <audio data-key="65" src="../assets/sounds/boom.wav"></audio>
    <audio data-key="83" src="../assets/sounds/clap.wav"></audio>
    <audio data-key="68" src="../assets/sounds/hihat.wav"></audio>
    <audio data-key="70" src="../assets/sounds/kick.wav"></audio>
    <audio data-key="71" src="../assets/sounds/openhat.wav"></audio>
    <audio data-key="72" src="../assets/sounds/ride.wav"></audio>
    <audio data-key="74" src="../assets/sounds/snare.wav"></audio>
    <audio data-key="75" src="../assets/sounds/tink.wav"></audio>
    <audio data-key="76" src="../assets/sounds/tom.wav"></audio>

  </main>
</main>
<div class="util__buttons">
  <button id="change-theme-btn" class="theme-btn">Change Theme</button>
</div>

</div>


  

  <footer>
    <p>Made with Code <i class="fas fa-code"></i> and Coffee <i class="fas fa-mug-hot"></i></p>
  </footer>
</body>
<script src="../assets/js/drumKit.js"></script>

</html>
